import dynamic from 'next/dynamic'
import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
import { useRouter } from 'next/router'
import _ from 'lodash'

const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
const ProductSearch = dynamic(() => import('@/lib/product/components/ProductSearch'))
const Brand = dynamic(() => import('@/lib/brand/components/Brand'))

export default function BrandDetail() {
  const router = useRouter()
  const { slug = '' } = router.query
  return (
    <BasicLayout>
      <Brand id={getIdFromSlug(slug)} />
      {!_.isEmpty(router.query) && (
        <ProductSearch
          query={_.omit(router.query, 'slug')}
          prefixUrl={`/shop/brands/${slug}`}
          defaultBrand={getNameFromSlug(slug)}
        />
      )}
    </BasicLayout>
  )
}
